<template>
	<view class="ad_images_component">
		<u-gap height="8"></u-gap>
		<!-- 一行一个 -->
		<view class="single_img" v-if="type == 1">
			<view v-for="(item, index) in value" :key="item.id">
				<image
					style="width: 100%;display: block;border-radius: 16rpx;"
					:src="item.imageUrl"
					@click="itemTo(item)"
					mode="widthFix"
				></image>
				<u-gap height="16" v-if="index + 1 !== value.length"></u-gap>
			</view>
		</view>
		<!-- 一行两个 -->
		<view class="double_img" v-if="type == 2">
			<view v-for="(item, index) in value" :key="item.id">
				<u-gap height="8" v-if="index !== 0 && index !== 1"></u-gap>
				<image
					:src="item.imageUrl || item.pictureUrl"
					style="width: 343rpx;border-radius: 16rpx;display: block;"
					mode="widthFix"
					@click="itemTo(item)"
				></image>
				<u-gap height="8" v-if="index + 1 !== value.length"></u-gap>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="swiper_box" v-if="type == 6">
			<u-swiper
				name="imageUrl"
				img-mode="scaleToFill"
				border-radius="24"
				:list="value"
				bg-color="none"
				height="230"
				interval="3000"
				@click="swiperClick"
			/>
		</view>
		<u-gap height="8"></u-gap>
	</view>
</template>

<script>
import { getAdvertInfo } from '@/api/http/home'
export default {
	props: {
		type: {
			type: [String, Number],
			default: ''
		},
		value: {
			type: Array,
			default: () => []
		},
		modelType: {
			type: [String, Number],
			default: ''
		}
	},
	data() {
		return {}
	},
	methods: {
		itemTo(row) {
			const data = {
				...row,
				modelType: this.modelType
			}
			this.$store.commit('VIEW_SWITCH', data)
		},
		swiperClick(index) {
			const data = {
				...this.value[index],
				modelType: this.modelType
			}
			this.$store.commit('VIEW_SWITCH', data)
		}
	}
}
</script>

<style lang="scss">
.ad_images_component {
	margin: 0 24rpx;
	.image {
		width: 100%;
		display: block;
	}
	.double_img {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.block {
			width: 6rpx;
			opacity: 1;
		}
	}
	.swiper_box {
		border-radius: 24rpx;
		overflow: hidden;
	}
}
</style>
